[V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: "Geist", "Geist Fallback"; --font-mono: "Geist Mono", "Geist Mono Fallback"; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px; --radius-xl: 0px; --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescript:file="lib/auth.ts" isMerged="true" import { cookies } from "next/headers" import crypto from "node:crypto" export interface UserInfo { sub: string name?: string email?: string preferred_username?: string picture?: string } export function generateSecureRandomString(length: number): string { const charset = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-._~" const randomBytes = crypto.getRandomValues(new Uint8Array(length)) return Array.from(randomBytes, (byte) => charset[byte % charset.length]).join("") } export async function getSession() { const cookieStore = await cookies() const idToken = cookieStore.get("id_token")?.value const accessToken = cookieStore.get("access_token")?.value if (!idToken || !accessToken) { return null } try { // Decode JWT (without verification for simplicity - in production you should verify) const payload = JSON.parse(Buffer.from(idToken.split(".")[1], "base64").toString()) return { user: payload as UserInfo, accessToken, } } catch { return null } } export async function clearSession() { const cookieStore = await cookies() cookieStore.delete("id_token") cookieStore.delete("access_token") cookieStore.delete("refresh_token") } [V0_FILE]typescript:file="app/api/auth/authorize/route.ts" isMerged="true" import crypto from "node:crypto" import { type NextRequest, NextResponse } from "next/server" import { cookies } from "next/headers" import { generateSecureRandomString } from "@/lib/auth" export async function GET(req: NextRequest) { const state = generateSecureRandomString(43) const nonce = generateSecureRandomString(43) const code_verifier = crypto.randomBytes(43).toString("hex") const code_challenge = crypto.createHash("sha256").update(code_verifier).digest("base64url") const cookieStore = await cookies() // Store PKCE values in secure cookies cookieStore.set("oauth_state", state, { maxAge: 10 * 60, // 10 minutes secure: true, httpOnly: true, sameSite: "lax", }) cookieStore.set("oauth_nonce", nonce, { maxAge: 10 * 60, secure: true, httpOnly: true, sameSite: "lax", }) cookieStore.set("oauth_code_verifier", code_verifier, { maxAge: 10 * 60, secure: true, httpOnly: true, sameSite: "lax", }) const queryParams = new URLSearchParams({ client_id: process.env.NEXT_PUBLIC_VERCEL_APP_CLIENT_ID as string, redirect_uri: `${req.nextUrl.origin}/api/auth/callback`, state, nonce, code_challenge, code_challenge_method: "S256", response_type: "code", scope: "openid email profile", }) const authorizationUrl = `https://vercel.com/oauth/authorize?${queryParams.toString()}` return NextResponse.redirect(authorizationUrl) } [V0_FILE]typescript:file="app/api/auth/signout/route.ts" isMerged="true" import { NextResponse } from "next/server" import { clearSession } from "@/lib/auth" export async function POST() { await clearSession() return NextResponse.json({ success: true }) } [V0_FILE]typescript:file="app/api/auth/user/route.ts" isEdit="true" isMerged="true" import { NextResponse } from "next/server" import { getSession } from "@/lib/auth" export async function GET() { const session = await getSession() if (!session) { return NextResponse.json({ user: null }, { status: 200 }) } return NextResponse.json({ user: session.user }) } [V0_FILE]json:file="package.json" isEdit="true" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "@vercel/blob": "^0.27.0", "ai": "^5.0.95", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.3", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76", "@supabase/ssr": "0.8.0" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]sql:file="scripts/000-setup-complete.sql" isEdit="true" isQuickEdit="true" isMerged="true" -- FLUX.2 Playground - Complete Database Setup -- Run this script ONCE to set up everything needed -- Drop existing table if it exists (for clean setup) DROP TABLE IF EXISTS generations CASCADE; -- Create table for storing image generations CREATE TABLE generations ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), user_id TEXT, -- Nullable for anonymous users (stores Vercel OAuth sub) user_email TEXT, ip_address TEXT, -- For anonymous user rate limiting prompt TEXT NOT NULL, model TEXT DEFAULT 'bfl/flux-2-pro', aspect_ratio TEXT DEFAULT '1:1', quality TEXT DEFAULT 'standard', number_of_images INTEGER DEFAULT 1, images TEXT[] NOT NULL, -- Array of Vercel Blob public URLs reference_images TEXT[], -- Array of reference image URLs or base64 created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW() ); -- Create indexes for faster queries CREATE INDEX idx_generations_user_id ON generations(user_id) WHERE user_id IS NOT NULL; CREATE INDEX idx_generations_ip_address ON generations(ip_address) WHERE ip_address IS NOT NULL; CREATE INDEX idx_generations_created_at ON generations(created_at DESC); -- Enable Row Level Security ALTER TABLE generations ENABLE ROW LEVEL SECURITY; -- Drop existing policies if they exist DROP POLICY IF EXISTS "Users can view own generations" ON generations; DROP POLICY IF EXISTS "Users can insert own generations" ON generations; DROP POLICY IF EXISTS "Users can delete own generations" ON generations; DROP POLICY IF EXISTS "Anonymous can view own generations" ON generations; DROP POLICY IF EXISTS "Anonymous can insert generations" ON generations; DROP POLICY IF EXISTS "Allow reads for matching user_id" ON generations; -- Simplified RLS policies - only for database reads -- Service role (admin client) handles all writes and bypasses RLS CREATE POLICY "Allow reads for matching user_id" ON generations FOR SELECT USING (true); -- Service role filters by user_id in application code -- No INSERT policies needed - all inserts go through service role which bypasses RLS -- Note: No storage bucket needed - using Vercel Blob for image storage [V0_FILE]typescript:file="app/api/generate-with-images/route.ts" isEdit="true" isQuickEdit="true" isMerged="true" import { experimental_generateImage } from "ai" import { getSession } from "@/lib/auth" import { createAdminSupabaseClient, getClientIP, uploadImageToBlob } from "@/lib/supabase" type ImageGenerationRequest = { prompt: string n?: number aspectRatio?: string quality?: string referenceImages?: string[] } function getImageDimensions(aspectRatio: string): { width: number; height: number } { // Black Forest Labs supports dimensions from 256-1920 pixels // Aspect ratios from 3:7 (portrait) to 7:3 (landscape) const dimensionsMap: Record = { "1:1": { width: 1024, height: 1024 }, "16:9": { width: 1344, height: 768 }, "9:16": { width: 768, height: 1344 }, "4:3": { width: 1024, height: 768 }, "3:4": { width: 768, height: 1024 }, } return dimensionsMap[aspectRatio] || dimensionsMap["1:1"] } async function convertImageToBase64(imageUrl: string): Promise { try { // If it's already a data URL, return the base64 part if (imageUrl.startsWith("data:image")) { return imageUrl.split(",")[1] } // If it's a Blob URL or any other URL, fetch and convert const response = await fetch(imageUrl) const buffer = await response.arrayBuffer() const base64 = Buffer.from(buffer).toString("base64") return base64 } catch (error) { console.error("Error converting image to base64:", error) throw new Error("Failed to process reference image") } } export async function POST(req: Request) { try { const session = await getSession() const clientIP = getClientIP(req) console.log("[v0] Request details:", { hasSession: !!session, userId: session?.user.sub || null, clientIP: clientIP, }) if (!process.env.AI_GATEWAY_API_KEY) { return Response.json({ error: "AI Gateway API key is not configured" }, { status: 500 }) } if (!session && clientIP) { const adminSupabase = await createAdminSupabaseClient() const twentyFourHoursAgo = new Date(Date.now() - 24 * 60 * 60 * 1000).toISOString() const { count, error: countError } = await adminSupabase .from("generations") .select("*", { count: "exact", head: true }) .is("user_id", null) .eq("ip_address", clientIP) .gte("created_at", twentyFourHoursAgo) if (countError) { console.error("Error checking IP rate limit:", countError) } else if (count !== null && count >= 1) { return Response.json( { error: "Rate limit exceeded", message: "You've used your free generation for today. Please sign in to continue.", }, { status: 401 }, ) } } const body = (await req.json()) as ImageGenerationRequest if (!body.prompt) { return Response.json({ error: "Prompt is required" }, { status: 400 }) } const numberOfImages = body.n || 1 const aspectRatio = body.aspectRatio || "1:1" const quality = body.quality || "standard" const referenceImages = body.referenceImages || [] const dimensions = getImageDimensions(aspectRatio) const providerOptions: any = { blackForestLabs: { width: dimensions.width, height: dimensions.height, }, } if (referenceImages.length > 0) { try { const base64Image = await convertImageToBase64(referenceImages[0]) providerOptions.blackForestLabs.inputImage = base64Image } catch (error) { console.error("Failed to process reference image:", error) // Continue without reference image rather than failing the whole request } } const result = await experimental_generateImage({ model: "bfl/flux-2-pro", prompt: body.prompt, n: numberOfImages, providerOptions, }) const userId = session?.user.sub || null const userEmail = session?.user.email || null const imageUploadPromises = result.images.map((img) => uploadImageToBlob(img.base64, userId, img.mediaType || "image/png"), ) const blobUrls = await Promise.all(imageUploadPromises) const successfulUrls = blobUrls.filter((url): url is string => url !== null) if (successfulUrls.length === 0) { return Response.json({ error: "Failed to upload images to Vercel Blob" }, { status: 500 }) } const adminSupabase = await createAdminSupabaseClient() try { const generationData = { user_id: userId, user_email: userEmail, ip_address: session ? null : clientIP, prompt: body.prompt, model: "bfl/flux-2-pro", aspect_ratio: aspectRatio, quality: quality, number_of_images: numberOfImages, images: successfulUrls, reference_images: referenceImages.length > 0 ? referenceImages : null, } const { data: savedGeneration, error: saveError } = await adminSupabase .from("generations") .insert(generationData) .select() .single() if (saveError) { console.error("Error saving generation to Supabase:", saveError) } return Response.json({ images: successfulUrls.map((url) => ({ url, mimeType: "image/png", })), generationId: savedGeneration?.id, }) } catch (saveError) { console.error("Error saving to Supabase:", saveError) return Response.json({ images: successfulUrls.map((url) => ({ url, mimeType: "image/png", })), }) } } catch (error) { if (process.env.NODE_ENV === "development") { console.error("Error generating image:", error) } const errorMessage = error instanceof Error ? error.message : "Unknown error" return Response.json( { error: "Failed to generate images", details: errorMessage, }, { status: 500 }, ) } } [V0_FILE]typescript:file="lib/supabase.ts" isEdit="true" isQuickEdit="true" isMerged="true" import { createBrowserClient } from "@supabase/ssr" import { createServerClient } from "@supabase/ssr" import { cookies } from "next/headers" import { put } from "@vercel/blob" // Client-side Supabase client (for browser operations if needed) export function createClient() { return createBrowserClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!) } export async function createAdminSupabaseClient() { const cookieStore = await cookies() return createServerClient( process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.SUPABASE_SERVICE_ROLE_KEY!, // Service role bypasses RLS - we validate Vercel OAuth in routes { cookies: { getAll() { return cookieStore.getAll() }, setAll(cookiesToSet) { try { cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options)) } catch { // Ignore - called from Server Component } }, }, }, ) } // Extract client IP from request headers (for anonymous rate limiting) export function getClientIP(request: Request): string | null { // Check various headers that might contain the real IP const forwardedFor = request.headers.get("x-forwarded-for") const realIp = request.headers.get("x-real-ip") const cfConnectingIp = request.headers.get("cf-connecting-ip") const vercelIp = request.headers.get("x-vercel-forwarded-for") // x-forwarded-for can contain multiple IPs, take the first one (real client IP) if (forwardedFor) { return forwardedFor.split(",")[0].trim() } // Vercel specific header if (vercelIp) { return vercelIp.split(",")[0].trim() } if (realIp) { return realIp } if (cfConnectingIp) { return cfConnectingIp } // In development/localhost, generate a stable fingerprint from user agent const userAgent = request.headers.get("user-agent") if (userAgent && process.env.NODE_ENV === "development") { // Create a simple hash of the user agent as a pseudo-IP for development const hash = userAgent.split("").reduce((acc, char) => { return ((acc << 5) - acc + char.charCodeAt(0)) | 0 }, 0) return `dev-${Math.abs(hash)}` } return null } // Upload image to Vercel Blob and return public URL export async function uploadImageToBlob( imageBase64: string, userId: string | null, mimeType = "image/png", ): Promise { try { // Convert base64 to buffer const buffer = Buffer.from(imageBase64, "base64") // Generate unique filename const timestamp = Date.now() const random = Math.random().toString(36).substring(7) const extension = mimeType.split("/")[1] || "png" const folder = userId || "anonymous" const filename = `${folder}/${timestamp}-${random}.${extension}` // Upload to Vercel Blob const blob = await put(filename, buffer, { access: "public", contentType: mimeType, }) return blob.url } catch (error) { console.error("Error uploading to Vercel Blob:", error) return null } } // Types for our generations table export interface Generation { id: string user_id: string | null // Vercel OAuth sub user_email: string | null // Vercel OAuth email ip_address: string | null // For anonymous rate limiting prompt: string model: string aspect_ratio: string quality: string number_of_images: number images: string[] // Array of Vercel Blob URLs reference_images: string[] | null created_at: string } [V0_FILE]png:file="public/og-image.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/nano-banana-pro-image-editing-result%20%2812%29-ITw4bQbgu7DZY9n83G7LODZ9Qxn8Cg.png" isMerged="true" [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Geist, Geist_Mono } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import "./globals.css" const _geist = Geist({ subsets: ["latin"] }) const _geistMono = Geist_Mono({ subsets: ["latin"] }) export const metadata: Metadata = { title: "FLUX.2 Playground - Powered by Vercel AI Gateway", description: "Generate stunning images with FLUX.2 [pro] by Black Forest Labs. A playground for exploring state-of-the-art image generation powered by Vercel AI Gateway.", generator: "v0.app", openGraph: { title: "FLUX.2 Playground", description: "Generate stunning images with FLUX.2 [pro] by Black Forest Labs. Powered by Vercel AI Gateway.", images: [ { url: "/og-image.png", width: 1200, height: 630, alt: "FLUX.2 Playground - AI Image Generation", }, ], type: "website", }, twitter: { card: "summary_large_image", title: "FLUX.2 Playground", description: "Generate stunning images with FLUX.2 [pro] by Black Forest Labs. Powered by Vercel AI Gateway.", images: ["/og-image.png"], }, icons: { icon: [ { url: "/icon-light-32x32.png", media: "(prefers-color-scheme: light)", }, { url: "/icon-dark-32x32.png", media: "(prefers-color-scheme: dark)", }, { url: "/icon.svg", type: "image/svg+xml", }, ], apple: "/apple-icon.png", }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect, useRef } from "react" import { Button } from "@/components/ui/button" import { Textarea } from "@/components/ui/textarea" import { Label } from "@/components/ui/label" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Progress } from "@/components/ui/progress" import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@/components/ui/select" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" const XIcon = ({ className }: { className?: string }) => ( ) const PlusIcon = ({ className }: { className?: string }) => ( ) const Grid2x2Icon = ({ className }: { className?: string }) => ( ) const SquareIcon = ({ className }: { className?: string }) => ( ) type GeneratedImage = { mimeType: string dataUrl: string | null // This will now be a Storage URL instead of base64 url?: string // Added for Storage URLs } type GenerationResult = { id: string images: Array<{ mimeType: string; dataUrl: string; url?: string }> error?: string prompt?: string aspectRatio?: string referenceImages?: string[] timestamp: number } const HISTORY_STORAGE_KEY = "flux-playground-history" const PENDING_GENERATION_KEY = "flux-pending-generation" const ANONYMOUS_HISTORY_KEY = "flux-anonymous-history" // Changed to FluxPlayground and updated state types export default function FluxPlayground() { const [prompt, setPrompt] = useState("") const [numberOfImages, setNumberOfImages] = useState("1") // Changed to string for Select const [aspectRatio, setAspectRatio] = useState("1:1") const [quality, setQuality] = useState("standard") const [loading, setLoading] = useState(false) // Renamed to isLoading const [progress, setProgress] = useState(0) // Renamed to loadingProgress const [result, setResult] = useState(null) // Consolidated into generatedImages and history const [history, setHistory] = useState< Array<{ id: string // Added id for delete functionality prompt: string aspectRatio: string numberOfImages: number images: { dataUrl: string; mimeType: string }[] timestamp: number // Added timestamp for ordering }> >([]) const [displayResult, setDisplayResult] = useState(null) // Consolidated into selectedImage and history const [currentImageIndex, setCurrentImageIndex] = useState(0) const [viewMode, setViewMode] = useState<"single" | "gallery">("single") const [fullscreenImage, setFullscreenImage] = useState(null) const [referenceImages, setReferenceImages] = useState([]) const [user, setUser] = useState(null) // Simplified user type const [authLoading, setAuthLoading] = useState(true) const [showAuthModal, setShowAuthModal] = useState(false) const [isDragging, setIsDragging] = useState(false) const fileInputRef = useRef(null) // New ref const checkSession = async () => { try { const response = await fetch("/api/auth/user") if (response.ok) { const data = await response.json() if (data.user) { setUser(data.user) await migrateAnonymousGenerations() await loadHistoryFromSupabase() } else { setUser(null) loadAnonymousHistory() } } } catch (error) { console.error("[v0] Error checking session:", error) setUser(null) loadAnonymousHistory() } finally { setAuthLoading(false) } } const loadAnonymousHistory = () => { try { const savedHistory = localStorage.getItem(ANONYMOUS_HISTORY_KEY) if (savedHistory) { const parsed = JSON.parse(savedHistory) setHistory(parsed) } } catch (error) { console.error("[v0] Error loading anonymous history:", error) } } const migrateAnonymousGenerations = async () => { try { console.log("[v0] Claiming anonymous generations...") const response = await fetch("/api/generations/claim", { method: "POST", }) if (response.ok) { const data = await response.json() console.log("[v0] Claimed", data.claimed, "anonymous generations") } } catch (error) { console.error("[v0] Error claiming anonymous generations:", error) } // Clear anonymous localStorage localStorage.removeItem(ANONYMOUS_HISTORY_KEY) // Reload history from Supabase (now includes claimed anonymous generations) await loadHistoryFromSupabase() } const loadHistoryFromSupabase = async () => { try { const response = await fetch("/api/generations") if (!response.ok) return const data = await response.json() const loadedHistory = data.generations.map((gen: any) => ({ id: gen.id, prompt: gen.prompt, aspectRatio: gen.aspect_ratio, referenceImages: gen.reference_images, timestamp: new Date(gen.created_at).getTime(), images: gen.images.map((imageUrl: string) => ({ dataUrl: imageUrl, // Storage URL used directly url: imageUrl, mimeType: "image/png", })), })) // Sort history by timestamp in descending order loadedHistory.sort((a: GenerationResult, b: GenerationResult) => b.timestamp - a.timestamp) setHistory(loadedHistory) } catch (error) { console.error("[v0] Error loading generations:", error) } } useEffect(() => { checkSession() }, []) useEffect(() => { if (user) { const pendingGen = sessionStorage.getItem("PENDING_GENERATION") // Updated key if (pendingGen) { try { const { prompt: savedPrompt, referenceImages: savedRefs, numberOfImages: savedNum, aspectRatio: savedRatio, quality: savedQuality, } = JSON.parse(pendingGen) sessionStorage.removeItem("PENDING_GENERATION") // Updated key // Restore the generation params and execute setPrompt(savedPrompt) setReferenceImages(savedRefs) setNumberOfImages(savedNum) setAspectRatio(savedRatio) setQuality(savedQuality) // Execute generation after a short delay to ensure state is updated setTimeout(() => { executeGeneration(savedPrompt, savedRefs, savedNum, savedRatio, savedQuality) }, 500) } catch (error) { console.error("Failed to restore pending generation:", error) } } } }, [user]) // Removed localStorage history loading and saving // useEffect(() => { // const savedHistory = localStorage.getItem(HISTORY_STORAGE_KEY) // if (savedHistory) { // try { // setHistory(JSON.parse(savedHistory)) // } catch (error) { // console.error("Failed to load history from localStorage") // } // } // }, []) // useEffect(() => { // if (history.length > 0) { // localStorage.setItem(HISTORY_STORAGE_KEY, JSON.stringify(history)) // } // }, [history]) useEffect(() => { if (!loading) { setProgress(0) return } const duration = 15000 // 15 seconds const interval = 50 // Update every 50ms for smooth animation const increment = (interval / duration) * 90 // Reach 90% in 15 seconds const timer = setInterval(() => { setProgress((prev) => { const next = prev + increment return next >= 90 ? 90 : next }) }, interval) return () => clearInterval(timer) }, [loading]) // Removed Supabase loading effect as it's handled in checkSession // useEffect(() => { // if (user) { // loadGenerationsFromSupabase() // } // }, [user]) useEffect(() => { const handleDragOver = (e: DragEvent) => { e.preventDefault() e.stopPropagation() if (e.dataTransfer?.types.includes("Files")) { setIsDragging(true) } } const handleDragLeave = (e: DragEvent) => { e.preventDefault() e.stopPropagation() // Only hide if leaving the window completely if (e.clientX === 0 && e.clientY === 0) { setIsDragging(false) } } const handleDrop = async (e: DragEvent) => { e.preventDefault() e.stopPropagation() setIsDragging(false) const files = e.dataTransfer?.files if (!files || files.length === 0) return const remainingSlots = 8 - referenceImages.length const filesToProcess = Array.from(files).slice(0, remainingSlots) for (const file of filesToProcess) { if (file.type.startsWith("image/")) { const reader = new FileReader() reader.onload = (event) => { const dataUrl = event.target?.result as string setReferenceImages((prev) => [...prev, dataUrl]) } reader.readAsDataURL(file) } } } document.addEventListener("dragover", handleDragOver) document.addEventListener("dragleave", handleDragLeave) document.addEventListener("drop", handleDrop) return () => { document.removeEventListener("dragover", handleDragOver) document.removeEventListener("dragleave", handleDragLeave) document.removeEventListener("drop", handleDrop) } }, [referenceImages.length]) useEffect(() => { const handleEscape = (e: KeyboardEvent) => { if (e.key === "Escape" && fullscreenImage) { setFullscreenImage(null) } } window.addEventListener("keydown", handleEscape) return () => window.removeEventListener("keydown", handleEscape) }, [fullscreenImage]) useEffect(() => { if (!loading) { setProgress(0) return } const duration = 15000 // 15 seconds const interval = 50 // Update every 50ms for smooth animation const increment = (interval / duration) * 90 // Reach 90% in 15 seconds const timer = setInterval(() => { setProgress((prev) => { const next = prev + increment return next >= 90 ? 90 : next }) }, interval) return () => clearInterval(timer) }, [loading]) const handleDeleteGeneration = async (id: string, e: React.MouseEvent) => { e.stopPropagation() // Prevent triggering the history item click if (!confirm("Are you sure you want to delete this generation?")) { return } try { const response = await fetch(`/api/generations/${id}`, { method: "DELETE", }) if (!response.ok) { throw new Error("Failed to delete generation") } // Remove from local history state setHistory((prev) => prev.filter((item) => item.id !== id)) // Clear displayResult if it was the deleted item if (displayResult?.id === id) { setDisplayResult(null) } console.log("[v0] Generation deleted successfully") } catch (error) { console.error("[v0] Error deleting generation:", error) alert("Failed to delete generation. Please try again.") } } const handleGenerate = async () => { if (!prompt.trim()) return await executeGeneration(prompt, referenceImages, numberOfImages, aspectRatio, quality) } const executeGeneration = async ( genPrompt: string, genReferenceImages: string[], genNumberOfImages: string, // Updated type genAspectRatio: string, genQuality: string, ) => { setPrompt(genPrompt) setReferenceImages(genReferenceImages) setNumberOfImages(genNumberOfImages) setAspectRatio(genAspectRatio) setQuality(genQuality) setLoading(true) // Renamed setProgress(0) // Renamed try { const response = await fetch("/api/generate-with-images", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ prompt: genPrompt, n: Number.parseInt(genNumberOfImages), // Ensure number aspectRatio: genAspectRatio, quality: genQuality, referenceImages: genReferenceImages, }), }) if (response.status === 401) { const errorData = await response.json() // Rate limit exceeded for anonymous users if (errorData.error === "Rate limit exceeded") { // Save pending generation sessionStorage.setItem( "PENDING_GENERATION", // Updated key JSON.stringify({ prompt: genPrompt, referenceImages: genReferenceImages, numberOfImages: genNumberOfImages, aspectRatio: genAspectRatio, quality: genQuality, }), ) // Show auth modal setShowAuthModal(true) // Clean up setLoading(false) // Renamed setProgress(0) // Renamed return } } if (!response.ok) { const errorData = await response.json() throw new Error(errorData.error || "Failed to generate image") } const data = await response.json() // Smooth progress to 100% setProgress(100) await new Promise((resolve) => setTimeout(resolve, 300)) const newResult = { id: data.generationId || Date.now().toString(), prompt: genPrompt, images: data.images.map((img: any) => ({ dataUrl: img.url, // Storage URL url: img.url, mimeType: img.mimeType || "image/png", })), timestamp: Date.now(), aspectRatio: genAspectRatio, referenceImages: genReferenceImages.length > 0 ? genReferenceImages : undefined, } setResult(newResult) setDisplayResult(newResult) setHistory((prev) => { const updatedHistory = [newResult, ...prev] updatedHistory.sort((a, b) => b.timestamp - a.timestamp) if (!user) { localStorage.setItem(ANONYMOUS_HISTORY_KEY, JSON.stringify(updatedHistory)) } return updatedHistory }) setReferenceImages([]) // No need for progressInterval as it's handled by useEffect setTimeout(() => { setProgress(0) // Reset progress after a short delay setLoading(false) }, 500) } catch (error) { console.error("Generation error:", error) alert(error instanceof Error ? error.message : "Failed to generate image") setLoading(false) // Renamed setProgress(0) // Renamed } } const handleSignOut = async () => { try { await fetch("/api/auth/signout", { method: "POST" }) setUser(null) loadAnonymousHistory() setResult(null) // Clear result as well setDisplayResult(null) window.location.href = "/" } catch (error) { console.error("Sign out failed:", error) } } const handleHistoryClick = (item: GenerationResult) => { setDisplayResult(item) setCurrentImageIndex(0) if (item.prompt) setPrompt(item.prompt) if (item.aspectRatio) setAspectRatio(item.aspectRatio) if (item.referenceImages) setReferenceImages(item.referenceImages) } const handlePrevImage = () => { setCurrentImageIndex((prev) => (prev === 0 ? (displayResult?.images.length || 1) - 1 : prev - 1)) } const handleNextImage = () => { setCurrentImageIndex((prev) => (prev === (displayResult?.images.length || 1) - 1 ? 0 : prev + 1)) } const handleUseAsInput = (dataUrl: string) => { if (referenceImages.length < 8) { setReferenceImages((prev) => [...prev, dataUrl]) } } const handleFileUpload = async (e: React.ChangeEvent) => { const files = e.target.files if (!files || files.length === 0) return const remainingSlots = 8 - referenceImages.length const filesToProcess = Array.from(files).slice(0, remainingSlots) for (const file of filesToProcess) { if (file.type.startsWith("image/")) { const reader = new FileReader() reader.onload = (event) => { const dataUrl = event.target?.result as string setReferenceImages((prev) => [...prev, dataUrl]) } reader.readAsDataURL(file) } } e.target.value = "" } const handleReferenceImageUpload = async (e: React.ChangeEvent) => { const files = e.target.files if (!files || files.length === 0) return const remainingSlots = 8 - referenceImages.length const filesToProcess = Array.from(files).slice(0, remainingSlots) for (const file of filesToProcess) { if (file.type.startsWith("image/")) { const reader = new FileReader() reader.onload = (event) => { const dataUrl = event.target?.result as string setReferenceImages((prev) => [...prev, dataUrl]) } reader.readAsDataURL(file) } } e.target.value = "" } const removeReferenceImage = (index: number) => { setReferenceImages((prev) => prev.filter((_, i) => i !== index)) } const hasMultipleImages = displayResult?.images && displayResult.images.length > 1 return (

{isDragging && (

Drop images to add to reference images

{8 - referenceImages.length} slots remaining

)} {showAuthModal && (

setShowAuthModal(false)} >

e.stopPropagation()} >

Sign in Required

You've used your free generation. Sign in with Vercel to continue generating images.

)} {fullscreenImage && (

setFullscreenImage(null)} > Fullscreen view

e.stopPropagation()} />

)} {/* Desktop Layout */}

FLUX.2 Playground

{user && (

{user.name}

{user.email}

Sign Out )}

{!user && !authLoading && (

)} {authLoading && (

)}

{history.length === 0 ? (

No history yet

) : (

{history.map((item) => ( ))}

)}

Prompt

setPrompt(e.target.value)}
                onKeyDown={(e) => {
                  if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
                    e.preventDefault()
                    handleGenerate()
                  }
                }}
                placeholder="A red balloon on a wooden table"
                className="font-mono text-sm resize-none min-h-[60px] lg:min-h-[80px]"
                disabled={loading}
              />
              <p className="font-mono text-xs text-muted-foreground">⌘ + Enter</p>
            </div>

<div className="space-y-2">
              <Label htmlFor="reference-images" className="font-mono text-xs text-muted-foreground">
                Reference Images (optional, max 8)
              </Label>
              <div className="flex flex-wrap gap-2">
                {referenceImages.map((img, index) => (
                  <div key={index} className="relative w-16 h-16 border border-border rounded overflow-hidden group">
                    <img
                      src={img || "/placeholder.svg"}
                      alt={`Reference ${index + 1}`}
                      className="w-full h-full object-cover"
                    />
                    <button
                      onClick={() => removeReferenceImage(index)}
                      className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center text-white text-xs"
                    >
                      Remove
                    </button>
                  </div>
                ))}
                {referenceImages.length < 8 && (
                  <label
                    htmlFor="reference-images"
                    className="w-16 h-16 border border-dashed border-border rounded flex items-center justify-center cursor-pointer hover:bg-muted/50 transition-colors"
                  >
                    <span className="text-2xl text-muted-foreground">+</span>
                  </label>
                )}
              </div>
              <input
                id="reference-images"
                type="file"
                accept="image/jpeg,image/png,image/webp"
                multiple
                onChange={handleFileUpload}
                className="hidden"
                disabled={loading || referenceImages.length >= 8}
              />
              {referenceImages.length > 0 && (
                <p className="font-mono text-xs text-muted-foreground">{referenceImages.length}/8 reference images</p>
              )}
            </div>

<div className="grid grid-cols-3 gap-2">
              <div className="space-y-2">
                <Label htmlFor="image-count" className="font-mono text-xs text-muted-foreground">
                  Images
                </Label>
                <Select value={numberOfImages} onValueChange={(v) => setNumberOfImages(v)} disabled={loading}>
                  <SelectTrigger id="image-count" className="h-9 font-mono text-xs">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    {[1, 2, 3, 4].map((num) => (
                      <SelectItem key={num} value={num.toString()}>
                        {num}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

<div className="space-y-2">
                <Label htmlFor="aspect-ratio" className="font-mono text-xs text-muted-foreground">
                  Ratio
                </Label>
                <Select value={aspectRatio} onValueChange={setAspectRatio} disabled={loading}>
                  <SelectTrigger id="aspect-ratio" className="font-mono text-[10px] lg:text-xs h-7 lg:h-8">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="1:1" className="font-mono text-xs">
                      1:1
                    </SelectItem>
                    <SelectItem value="16:9" className="font-mono text-xs">
                      16:9
                    </SelectItem>
                    <SelectItem value="9:16" className="font-mono text-xs">
                      9:16
                    </SelectItem>
                    <SelectItem value="4:3" className="font-mono text-xs">
                      4:3
                    </SelectItem>
                    <SelectItem value="3:4" className="font-mono text-xs">
                      3:4
                    </SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div className="space-y-2">
                <Label htmlFor="quality" className="font-mono text-xs text-muted-foreground">
                  Quality
                </Label>
                <Select value={quality} onValueChange={setQuality} disabled={loading}>
                  <SelectTrigger id="quality" className="h-9 font-mono text-xs">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="standard" className="font-mono text-xs">
                      Std
                    </SelectItem>
                    <SelectItem value="hd" className="font-mono text-xs">
                      HD
                    </SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>

<Button onClick={handleGenerate} disabled={loading || !prompt.trim()} className="w-full font-mono text-sm">
              {loading ? "Generating..." : "Generate"}
            </Button>

{displayResult?.error && (
              <div className="p-3 border border-destructive/50 bg-destructive/10 text-destructive font-mono text-xs">
                {displayResult.error}
              </div>
            )}
          </div>
        </div>
      </aside>

<section className="hidden lg:flex lg:flex-1 bg-muted/20 relative items-center justify-center overflow-hidden min-h-0">
        {loading && (
          <div className="absolute inset-0 z-20 flex items-center justify-center p-4 pointer-events-none">
            <div className="max-w-md w-full bg-background/95 backdrop-blur-sm border border-border p-4 space-y-2 pointer-events-auto">
              <Progress value={progress} className="h-1 transition-all duration-100" />
              <p className="font-mono text-xs text-muted-foreground text-center">{Math.round(progress)}%</p>
            </div>
          </div>
        )}

{!displayResult?.images ? (
          <p className="font-mono text-sm text-muted-foreground">Preview</p>
        ) : (
          <div className="w-full h-full relative">
            {hasMultipleImages && (
              <div className="absolute top-4 right-4 z-10 flex items-center gap-2 px-2 py-1 border border-border bg-background/95 backdrop-blur-sm">
                <span className="font-mono text-xs text-muted-foreground">View:</span>
                <button
                  onClick={() => setViewMode("single")}
                  className={`p-1 transition-colors ${
                    viewMode === "single" ? "text-foreground" : "text-muted-foreground hover:text-foreground"
                  }`}
                  aria-label="Single view"
                >
                  <SquareIcon className="w-4 h-4" />
                </button>
                <button
                  onClick={() => setViewMode("gallery")}
                  className={`p-1 transition-colors ${
                    viewMode === "gallery" ? "text-foreground" : "text-muted-foreground hover:text-foreground"
                  }`}
                  aria-label="Gallery view"
                >
                  <Grid2x2Icon className="w-4 h-4" />
                </button>
              </div>
            )}

{viewMode === "single" ? (
              <div className="w-full h-full flex flex-col items-center justify-center p-2 min-h-0">
                {displayResult.images[currentImageIndex]?.dataUrl && (
                  <div className="relative group max-w-full max-h-[calc(100%-6rem)] flex items-center justify-center">
                    <img
                      src={displayResult.images[currentImageIndex].dataUrl || "/placeholder.svg"}
                      alt={`Generated image ${currentImageIndex + 1}`}
                      className="max-w-full max-h-full w-auto h-auto object-contain cursor-zoom-in"
                      loading="lazy"
                      onClick={() => setFullscreenImage(displayResult.images[currentImageIndex].dataUrl)}
                    />
                    <button
                      onClick={() => handleUseAsInput(displayResult.images[currentImageIndex].dataUrl)}
                      className="absolute top-2 right-2 px-3 py-1.5 font-mono text-xs border border-border bg-background/95 hover:bg-muted transition-colors opacity-0 group-hover:opacity-100"
                      disabled={referenceImages.length >= 8}
                    >
                      Use as Input
                    </button>
                  </div>
                )}
                {displayResult.images.length > 1 && (
                  <div className="flex items-center justify-center gap-4 mt-4 flex-shrink-0">
                    <button
                      onClick={handlePrevImage}
                      className="px-4 py-2 font-mono text-xs border border-border bg-background hover:bg-muted transition-colors"
                    >
                      Previous
                    </button>
                    <p className="font-mono text-xs text-muted-foreground">
                      {currentImageIndex + 1} / {displayResult.images.length}
                    </p>
                    <button
                      onClick={handleNextImage}
                      className="px-4 py-2 font-mono text-xs border border-border bg-background hover:bg-muted transition-colors"
                    >
                      Next
                    </button>
                  </div>
                )}
              </div>
            ) : (
              <div className="grid grid-cols-2 gap-2 w-full h-full p-2">
                {displayResult.images.map((img, idx) => (
                  <div key={idx} className="relative group flex items-center justify-center min-h-0">
                    {img.dataUrl && (
                      <>
                        <img
                          src={img.dataUrl || "/placeholder.svg"}
                          alt={`Generated image ${idx + 1}`}
                          className="max-w-full max-h-full w-auto h-auto object-contain cursor-zoom-in"
                          loading="lazy"
                          onClick={() => setFullscreenImage(img.dataUrl)}
                        />
                        <button
                          onClick={() => handleUseAsInput(img.dataUrl)}
                          className="absolute top-2 right-2 px-2 py-1 font-mono text-xs border border-border bg-background/95 hover:bg-muted transition-colors opacity-0 group-hover:opacity-100"
                          disabled={referenceImages.length >= 8}
                        >
                          Use as Input
                        </button>
                      </>
                    )}
                  </div>
                ))}
              </div>
            )}
          </div>
        )}
      </section>

<div className="lg:hidden flex flex-col w-full h-full overflow-auto">
        {/* Header with title and sign in */}
        <div className="flex flex-col gap-4 p-4 border-b border-border flex-shrink-0 bg-background sticky top-0 z-10">
          <div className="flex items-center justify-between gap-3">
            <div className="space-y-1 flex-1">
              <h1 className="text-sm font-medium tracking-tight">FLUX.2 Playground</h1>
              <a
                href="https://vercel.com/ai-gateway/models/flux-2-pro"
                target="_blank"
                rel="noopener noreferrer"
                className="font-mono text-xs text-muted-foreground hover:text-foreground transition-colors"
              >
                Powered by Vercel AI Gateway
              </a>
            </div>
            {user && (
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <button className="focus:outline-none focus:ring-2 focus:ring-ring rounded-full">
                    <Avatar className="w-8 h-8 cursor-pointer hover:opacity-80 transition-opacity">
                      {user.picture && (
                        <AvatarImage src={user.picture || "/placeholder.svg"} alt={user.name || user.email} />
                      )}
                      <AvatarFallback>{user.name?.charAt(0) || user.email?.charAt(0)}</AvatarFallback>
                    </Avatar>
                  </button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end" className="w-56">
                  <DropdownMenuLabel className="font-normal">
                    <div className="flex flex-col space-y-1">
                      <p className="text-sm font-medium leading-none">{user.name}</p>
                      <p className="text-xs leading-none text-muted-foreground">{user.email}</p>
                    </div>
                  </DropdownMenuLabel>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem onClick={handleSignOut} className="cursor-pointer">
                    Sign Out
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            )}
          </div>
          {!user && !authLoading && (
            <div className="pt-2 border-t border-border">
              <Button
                onClick={() => (window.location.href = "/api/auth/authorize")}
                variant="outline"
                size="sm"
                className="w-full font-mono text-xs h-8 gap-2 bg-transparent"
              >
                <svg className="w-2.5 h-2.5" viewBox="0 0 76 76" fill="currentColor">
                  <polygon points="38,0 76,76 0,76" />
                </svg>
                Sign in with Vercel
              </Button>
            </div>
          )}
          {authLoading && (
            <div className="pt-2 border-t border-border">
              <div className="font-mono text-xs text-muted-foreground">Loading...</div>
            </div>
          )}
        </div>

{/* Preview section - moved between header and form */}
        <div className="min-h-[50vh] bg-muted/20 relative flex items-center justify-center flex-shrink-0 border-b border-border">
          {loading && (
            <div className="absolute inset-0 z-20 flex items-center justify-center p-4 pointer-events-none">
              <div className="max-w-md w-full bg-background/95 backdrop-blur-sm border border-border p-4 space-y-2 pointer-events-auto">
                <Progress value={progress} className="h-1 transition-all duration-100" />
                <p className="font-mono text-xs text-muted-foreground text-center">{Math.round(progress)}%</p>
              </div>
            </div>
          )}

{!displayResult?.images ? (
            <p className="font-mono text-sm text-muted-foreground">Preview</p>
          ) : (
            <div className="w-full h-full relative p-4">
              {hasMultipleImages && (
                <div className="absolute top-8 right-8 z-10 flex items-center gap-2 px-2 py-1 border border-border bg-background/95 backdrop-blur-sm">
                  <span className="font-mono text-xs text-muted-foreground">View:</span>
                  <button
                    onClick={() => setViewMode("single")}
                    className={`p-1 transition-colors ${
                      viewMode === "single" ? "text-foreground" : "text-muted-foreground hover:text-foreground"
                    }`}
                    aria-label="Single view"
                  >
                    <SquareIcon className="w-4 h-4" />
                  </button>
                  <button
                    onClick={() => setViewMode("gallery")}
                    className={`p-1 transition-colors ${
                      viewMode === "gallery" ? "text-foreground" : "text-muted-foreground hover:text-foreground"
                    }`}
                    aria-label="Gallery view"
                  >
                    <Grid2x2Icon className="w-4 h-4" />
                  </button>
                </div>
              )}

{viewMode === "single" ? (
                <div className="w-full h-full flex flex-col items-center justify-center space-y-4">
                  {displayResult.images[currentImageIndex]?.dataUrl && (
                    <div className="relative group max-w-full flex items-center justify-center">
                      <img
                        src={displayResult.images[currentImageIndex].dataUrl || "/placeholder.svg"}
                        alt={`Generated image ${currentImageIndex + 1}`}
                        className="max-w-full w-auto h-auto object-contain cursor-zoom-in"
                        loading="lazy"
                        onClick={() => setFullscreenImage(displayResult.images[currentImageIndex].dataUrl)}
                      />
                      <button
                        onClick={() => handleUseAsInput(displayResult.images[currentImageIndex].dataUrl)}
                        className="absolute top-2 right-2 px-3 py-1.5 font-mono text-xs border border-border bg-background/95 hover:bg-muted transition-colors opacity-0 group-hover:opacity-100"
                        disabled={referenceImages.length >= 8}
                      >
                        Use as Input
                      </button>
                    </div>
                  )}
                  {displayResult.images.length > 1 && (
                    <div className="flex items-center justify-center gap-4 flex-shrink-0">
                      <button
                        onClick={handlePrevImage}
                        className="px-4 py-2 font-mono text-xs border border-border bg-background hover:bg-muted transition-colors"
                      >
                        Previous
                      </button>
                      <p className="font-mono text-xs text-muted-foreground">
                        {currentImageIndex + 1} / {displayResult.images.length}
                      </p>
                      <button
                        onClick={handleNextImage}
                        className="px-4 py-2 font-mono text-xs border border-border bg-background hover:bg-muted transition-colors"
                      >
                        Next
                      </button>
                    </div>
                  )}
                </div>
              ) : (
                <div className="grid grid-cols-2 gap-2 w-full h-full">
                  {displayResult.images.map((img, idx) => (
                    <div key={idx} className="relative group flex items-center justify-center min-h-0">
                      {img.dataUrl && (
                        <>
                          <img
                            src={img.dataUrl || "/placeholder.svg"}
                            alt={`Generated image ${idx + 1}`}
                            className="max-w-full max-h-full w-auto h-auto object-contain cursor-zoom-in"
                            loading="lazy"
                            onClick={() => setFullscreenImage(img.dataUrl)}
                          />
                          <button
                            onClick={() => handleUseAsInput(img.dataUrl)}
                            className="absolute top-2 right-2 px-2 py-1 font-mono text-xs border border-border bg-background/95 hover:bg-muted transition-colors opacity-0 group-hover:opacity-100"
                            disabled={referenceImages.length >= 8}
                          >
                            Use as Input
                          </button>
                        </>
                      )}
                    </div>
                  ))}
                </div>
              )}
            </div>
          )}
        </div>

{/* Form section - moved after preview */}
        <div className="p-4 space-y-4 bg-background flex-shrink-0">
          <div className="space-y-2">
            <Label htmlFor="mobile-prompt" className="font-mono text-xs text-muted-foreground">
              Prompt
            </Label>
            <Textarea
              id="mobile-prompt"
              value={prompt}
              onChange={(e) => setPrompt(e.target.value)}
              onKeyDown={(e) => {
                if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
                  e.preventDefault()
                  handleGenerate()
                }
              }}
              placeholder="A red balloon on a wooden table"
              className="min-h-[100px] font-mono text-xs resize-none bg-transparent"
            />
          </div>

<div className="space-y-2">
            <Label className="font-mono text-xs text-muted-foreground">Reference Images (optional, max 8)</Label>
            <div className="grid grid-cols-4 gap-2">
              {referenceImages.map((img, idx) => (
                <div key={idx} className="relative aspect-square border border-border bg-muted/20">
                  <img
                    src={img || "/placeholder.svg"}
                    alt={`Reference ${idx + 1}`}
                    className="w-full h-full object-cover"
                  />
                  <button
                    onClick={() => removeReferenceImage(idx)}
                    className="absolute -top-1 -right-1 w-4 h-4 flex items-center justify-center border border-border bg-background hover:bg-muted transition-colors"
                    aria-label="Remove image"
                  >
                    <XIcon className="w-3 h-3" />
                  </button>
                </div>
              ))}
              {referenceImages.length < 8 && (
                <label className="aspect-square border border-dashed border-border bg-muted/20 flex items-center justify-center cursor-pointer hover:bg-muted/40 transition-colors">
                  <input
                    type="file"
                    accept="image/*"
                    multiple
                    onChange={handleReferenceImageUpload}
                    className="hidden"
                  />
                  <PlusIcon className="w-4 h-4 text-muted-foreground" />
                </label>
              )}
            </div>
          </div>

<div className="grid grid-cols-3 gap-2">
            <div className="space-y-2">
              <Label htmlFor="mobile-images" className="font-mono text-xs text-muted-foreground">
                Images
              </Label>
              <Select value={numberOfImages} onValueChange={(val) => setNumberOfImages(val)} disabled={loading}>
                <SelectTrigger id="mobile-images" className="h-9 font-mono text-xs">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {[1, 2, 3, 4].map((num) => (
                    <SelectItem key={num} value={num.toString()}>
                      {num}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

<div className="space-y-2">
              <Label htmlFor="mobile-ratio" className="font-mono text-xs text-muted-foreground">
                Ratio
              </Label>
              <Select value={aspectRatio} onValueChange={setAspectRatio} disabled={loading}>
                <SelectTrigger id="mobile-ratio" className="font-mono text-xs h-8 bg-transparent">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {["1:1", "16:9", "9:16", "4:3", "3:4"].map((ratio) => (
                    <SelectItem key={ratio} value={ratio} className="font-mono text-xs">
                      {ratio}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

<div className="space-y-2">
              <Label htmlFor="mobile-quality" className="font-mono text-xs text-muted-foreground">
                Quality
              </Label>
              <Select value={quality} onValueChange={setQuality} disabled={loading}>
                <SelectTrigger id="mobile-quality" className="font-mono text-xs h-8 bg-transparent">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {["Std", "HD"].map((q) => (
                    <SelectItem key={q} value={q} className="font-mono text-xs">
                      {q}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          </div>

<Button
            onClick={handleGenerate}
            disabled={loading || !prompt.trim()}
            className="w-full font-mono text-xs h-9"
          >
            {!user ? "Sign in to Generate" : loading ? "Generating..." : "Generate"}
          </Button>
        </div>

{/* History section - remains at bottom */}
        <div className="border-t border-border bg-background">
          <div className="p-4">
            <h2 className="font-mono text-xs text-muted-foreground mb-2">History</h2>
            {history.length === 0 ? (
              <p className="font-mono text-xs text-muted-foreground text-center py-4">No history yet</p>
            ) : (
              <div className="flex flex-col gap-2">
                {history.map((item) => (
                  <button
                    key={item.id}
                    onClick={() => handleHistoryClick(item)}
                    className={`flex gap-3 p-3 border border-border hover:bg-muted/50 transition-colors text-left relative group ${
                      displayResult === item ? "bg-muted" : ""
                    }`}
                  >
                    {item.images[0]?.dataUrl && (
                      <div className="w-16 h-16 flex-shrink-0 border border-border bg-background overflow-hidden relative">
                        <img
                          src={item.images[0].dataUrl || "/placeholder.svg"}
                          alt=""
                          className="w-full h-full object-cover"
                        />
                        {item.images.length > 1 && (
                          <div className="absolute bottom-0 right-0 bg-black/80 text-white text-[10px] font-mono px-1 py-0.5">
                            {item.images.length}
                          </div>
                        )}
                      </div>
                    )}
                    <div className="flex-1 min-w-0">
                      <p className="font-mono text-xs text-foreground line-clamp-2">{item.prompt}</p>
                      <p className="font-mono text-xs text-muted-foreground mt-1">{item.aspectRatio}</p>
                    </div>
                    <button
                      onClick={(e) => handleDeleteGeneration(item.id, e)}
                      className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity bg-destructive/10 hover:bg-destructive/20 text-destructive p-1.5 rounded"
                      title="Delete generation"
                    >
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        width="14"
                        height="14"
                        viewBox="0 0 24 24"
                        fill="none"
                        stroke="currentColor"
                        strokeWidth="2"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                      >
                        <path d="M3 6h18" />
                        <path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
                        <path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
                      </svg>
                    </button>
                  </button>
                ))}
              </div>
            )}
          </div>
        </div>
      </div>
    </main>
  )
}
[V0_FILE]typescript:file="app/api/generations/route.ts" isEdit="true" isQuickEdit="true"
import { type NextRequest, NextResponse } from "next/server"
import { createAdminSupabaseClient } from "@/lib/supabase"
import { getSession } from "@/lib/auth"

export async function GET(req: NextRequest) {
  try {
    const session = await getSession()

if (!session) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

const supabase = await createAdminSupabaseClient()

const { data, error } = await supabase
      .from("generations")
      .select("*")
      .eq("user_id", session.user.sub)
      .order("created_at", { ascending: false })
      .limit(50)

if (error) {
      console.error("Error fetching generations:", error)
      return NextResponse.json({ error: "Failed to fetch generations" }, { status: 500 })
    }

return NextResponse.json({ generations: data })
  } catch (error) {
    console.error("Error in generations GET:", error)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}

export async function POST(req: NextRequest) {
  try {
    const session = await getSession()

if (!session) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

const body = await req.json()
    const { prompt, model, aspectRatio, quality, numberOfImages, images, referenceImages } = body

const supabase = await createAdminSupabaseClient()

const { data, error } = await supabase
      .from("generations")
      .insert({
        user_id: session.user.sub,
        user_email: session.user.email,
        prompt,
        model,
        aspect_ratio: aspectRatio,
        quality,
        number_of_images: numberOfImages,
        images,
        reference_images: referenceImages || null,
      })
      .select()
      .single()

if (error) {
      console.error("Error saving generation:", error)
      return NextResponse.json({ error: "Failed to save generation" }, { status: 500 })
    }

return NextResponse.json({ generation: data })
  } catch (error) {
    console.error("Error in generations POST:", error)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/generations/[id]/route.ts" isEdit="true" isQuickEdit="true"
import { type NextRequest, NextResponse } from "next/server"
import { createAdminSupabaseClient } from "@/lib/supabase"
import { getSession } from "@/lib/auth"
import { del } from "@vercel/blob"

export async function DELETE(req: NextRequest, { params }: { params: { id: string } }) {
  try {
    const session = await getSession()

if (!session) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

const { id } = params
    const supabase = await createAdminSupabaseClient()

// First, fetch the generation to verify ownership and get image URLs
    const { data: generation, error: fetchError } = await supabase.from("generations").select("*").eq("id", id).single()

if (fetchError || !generation) {
      return NextResponse.json({ error: "Generation not found" }, { status: 404 })
    }

// Verify ownership
    if (generation.user_id !== session.user.sub) {
      return NextResponse.json({ error: "Forbidden" }, { status: 403 })
    }

// Delete images from Vercel Blob
    if (generation.images && Array.isArray(generation.images)) {
      for (const imageUrl of generation.images) {
        try {
          await del(imageUrl)
        } catch (blobError) {
          console.error("Error deleting blob image:", imageUrl, blobError)
          // Continue even if blob deletion fails
        }
      }
    }

// Delete the database record
    const { error: deleteError } = await supabase.from("generations").delete().eq("id", id)

if (deleteError) {
      console.error("Error deleting generation:", deleteError)
      return NextResponse.json({ error: "Failed to delete generation" }, { status: 500 })
    }

return NextResponse.json({ success: true })
  } catch (error) {
    console.error("Error in generations DELETE:", error)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/generations/claim/route.ts" isEdit="true" isQuickEdit="true"
import { type NextRequest, NextResponse } from "next/server"
import { createAdminSupabaseClient, getClientIP } from "@/lib/supabase"
import { getSession } from "@/lib/auth"

export async function POST(req: NextRequest) {
  try {
    const session = await getSession()

if (!session) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
    }

const clientIP = getClientIP(req)

console.log("[v0] Claiming anonymous generations for user:", session.user.sub, "with IP:", clientIP)

if (!clientIP) {
      console.log("[v0] No IP detected, cannot claim anonymous generations")
      return NextResponse.json({ claimed: 0 })
    }

const supabase = await createAdminSupabaseClient()

// Update all anonymous generations (user_id IS NULL) that have this IP
    // to belong to the newly authenticated user
    const { data, error } = await supabase
      .from("generations")
      .update({
        user_id: session.user.sub,
        user_email: session.user.email,
      })
      .eq("ip_address", clientIP)
      .is("user_id", null)
      .select()

if (error) {
      console.error("Error claiming anonymous generations:", error)
      return NextResponse.json({ error: "Failed to claim generations" }, { status: 500 })
    }

console.log("[v0] Successfully claimed", data?.length || 0, "anonymous generations")

return NextResponse.json({ claimed: data?.length || 0 })
  } catch (error) {
    console.error("Error in claim endpoint:", error)
    return NextResponse.json({ error: "Internal server error" }, { status: 500 })
  }
}
[V0_FILE]typescript:file="app/api/auth/callback/route.ts" isEdit="true" isQuickEdit="true"
import { type NextRequest, NextResponse } from "next/server"
import { cookies } from "next/headers"

export async function GET(req: NextRequest) {
  const searchParams = req.nextUrl.searchParams
  const code = searchParams.get("code")
  const state = searchParams.get("state")
  const error = searchParams.get("error")

const cookieStore = await cookies()
  const storedState = cookieStore.get("oauth_state")?.value
  const codeVerifier = cookieStore.get("oauth_code_verifier")?.value

// Handle user cancellation
  if (error) {
    return NextResponse.redirect(`${req.nextUrl.origin}?error=${error}`)
  }

// Validate state to prevent CSRF
  if (!state || !storedState || state !== storedState) {
    return NextResponse.redirect(`${req.nextUrl.origin}?error=invalid_state`)
  }

if (!code || !codeVerifier) {
    return NextResponse.redirect(`${req.nextUrl.origin}?error=missing_code`)
  }

try {
    const tokenBody = new URLSearchParams({
      client_id: process.env.NEXT_PUBLIC_VERCEL_APP_CLIENT_ID as string,
      client_secret: process.env.VERCEL_APP_CLIENT_SECRET as string,
      code,
      code_verifier: codeVerifier,
      grant_type: "authorization_code",
      redirect_uri: `${req.nextUrl.origin}/api/auth/callback`,
    }).toString()

console.log("[v0] Token exchange request:", {
      url: "https://vercel.com/api/login/oauth/token",
      redirect_uri: `${req.nextUrl.origin}/api/auth/callback`,
      has_client_secret: !!process.env.VERCEL_APP_CLIENT_SECRET,
      has_code: !!code,
      has_code_verifier: !!codeVerifier,
    })

const tokenResponse = await fetch("https://vercel.com/api/login/oauth/token", {
      method: "POST",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
      },
      body: tokenBody,
    })

console.log("[v0] Token response status:", tokenResponse.status)

if (!tokenResponse.ok) {
      const errorText = await tokenResponse.text()
      console.error("[v0] Token exchange failed:", {
        status: tokenResponse.status,
        statusText: tokenResponse.statusText,
        body: errorText,
      })
      throw new Error(`Token exchange failed: ${tokenResponse.status} ${errorText}`)
    }

const tokens = await tokenResponse.json()
    console.log("[v0] Tokens received:", {
      has_id_token: !!tokens.id_token,
      has_access_token: !!tokens.access_token,
      has_refresh_token: !!tokens.refresh_token,
    })

// Store tokens in secure httpOnly cookies
    cookieStore.set("id_token", tokens.id_token, {
      maxAge: 60 * 60, // 1 hour
      secure: true,
      httpOnly: true,
      sameSite: "lax",
    })
    cookieStore.set("access_token", tokens.access_token, {
      maxAge: 60 * 60,
      secure: true,
      httpOnly: true,
      sameSite: "lax",
    })
    if (tokens.refresh_token) {
      cookieStore.set("refresh_token", tokens.refresh_token, {
        maxAge: 30 * 24 * 60 * 60, // 30 days
        secure: true,
        httpOnly: true,
        sameSite: "lax",
      })
    }

// Clean up PKCE cookies
    cookieStore.delete("oauth_state")
    cookieStore.delete("oauth_nonce")
    cookieStore.delete("oauth_code_verifier")

return NextResponse.redirect(req.nextUrl.origin)
  } catch (error) {
    console.error("[v0] Auth callback error:", error)
    return NextResponse.redirect(`${req.nextUrl.origin}?error=token_exchange_failed`)
  }
}</article></body></html>

About

Tags

Share

More from estebansuarez

More Templates Like This

About

Tags

Share

About

Tags

Share

More from estebansuarez

More Templates Like This